<template>
	<view class="m-loadmore-c">
		<view class="padding30 loading" v-if="loading">
			<view class="loading-icon"></view>
			<view class="txt-style tips">{{loadingTxt}}</view>
		</view>
		<view class="padding30 nomore" v-else>
			<view class="txt-style txt">
				{{nomoreTxt}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "mLoadmore",
		props: {
			loadingTxt: {
				type: String,
				default: "正在加载..."
			},
			nomoreTxt: {
				type: String,
				default: "已经到底了"
			},
			loading: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-loadmore-c {
		.txt-style {
			font-size: 24rpx;
			color: #666;
		}

		.loading {
			line-height: 1;
			text-align: center;

			.tips {
				display: inline-block;
				vertical-align: middle;
			}

			

		}

		.nomore {
			position: relative;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.line {
				width: 80rpx;
				height: 0;
				border-top: 1px solid #bbb;
				transform: scaleY(0.5);
			}

			.txt {
				text-align: center;
				padding: 0 20rpx;
				color: #999;
			}

			&:before,
			&:after,
				{
				content: ' ';
				width: 80rpx;
				height: 0;
				border-top: 1px solid #bbb;
				transform: scaleY(0.5);
			}
		}

	}

</style>
